\:root
  --vs-primary: 25, 91, 255
  --vs-warn: 255, 186, 0
  --vs-danger: 255,71,87
  --vs-success: 70,201,58
  --vs-dark: 30,30,30
  --vs-light: 244,247,248
  --vs-color: 17,18,20

  // social colors

  --vs-facebook: 59, 89, 153
  --vs-twitter: 29, 161, 242
  --vs-youtube: 255, 0, 0
  --vs-pinterest: 189, 8, 28
  --vs-linkedin: 0, 119, 181
  --vs-snapchat: 255, 252, 0
  --vs-whatsapp: 37, 211, 102
  --vs-tumblr: 54, 70, 93
  --vs-reddit: 255, 69, 0
  --vs-spotify: 30, 215, 96
  --vs-amazon: 255, 153, 0
  --vs-medium: 2, 184, 117
  --vs-vimeo: 26, 183, 234
  --vs-skype: 0, 175, 240
  --vs-dribbble: 234, 76, 137
  --vs-slack: 74, 21, 75
  --vs-yahoo: 67, 2, 151
  --vs-twitch: 100, 65, 164
  --vs-discord: 114, 137, 218
  --vs-telegram: 0, 136, 204
  --vs-google-plus: 219, 68, 55
  --vs-messenger: 0, 132, 255

  // theme

  --vs-background: 255, 255, 255
  --vs-text: 44, 62, 80
  --vs-gray-1: 249, 252, 253
  --vs-gray-2: 244, 247, 248
  --vs-gray-3: 240, 243, 244
  --vs-gray-4: 230, 233, 234

[class*="--primary"]
  --vs-color: var(--vs-primary)
[class*="--default"]
  --vs-color: var(--vs-primary)
[class*="--danger"]
  --vs-color: var(--vs-danger)
[class*="--success"]
  --vs-color: var(--vs-success)
[class*="--dark"]
  --vs-color: var(--vs-dark)
[class*="--warn"]
  --vs-color: var(--vs-warn)
